<mat-error>
	<h3 *ngIf="router.url !== '/'">
		Can't connect to {{ activatedRoute.snapshot.paramMap.get('server') }}
		/ {{ activatedRoute.snapshot.paramMap.get('database') }}
		<br>
		Common problems are :
		<ul>
			<li>Bad connection credentials</li>
			<li>Database server doesn't respond correctly</li>
			<li>Backend is unavailable</li>
		</ul>
	</h3>
	<h2 *ngIf="router.url === '/'" style="text-align: center">
		Backend is unavailable
	</h2>
</mat-error>

<mat-divider style="margin: 20px 0px;"></mat-divider>

<div class="btns">

	<div
		*ngIf="router.url !== '/'">
		<button
			color="primary"
			mat-stroked-button
			routerLink="/">
			<span class="material-symbols-outlined notranslate">
				wifi_find
			</span>
			Connection list
		</button>
	</div>

	<div>
		<button
			(click)="reloadPage.emit()"
			color="accent"
			mat-stroked-button>
			<span class="material-symbols-outlined notranslate">
				refresh
			</span>
			Reload page
		</button>

		<a href="https://github.com/WebDB-App/app/issues/new"
		   mat-stroked-button
		   style="color: white"
		   target="_blank">
			<span class="material-symbols-outlined notranslate">
				bug_report
			</span>
			Send report
		</a>
	</div>

	<div>

		<button
			(click)="snackBar.open('Code copied', '⨉', {duration: 3000})"
			[cdkCopyToClipboard]="'docker logs $(docker ps -a -q --filter ancestor=webdb/app)'"
			color="primary"
			mat-stroked-button>
			<mat-icon svgIcon="docker"></mat-icon>
			Get logs
		</button>

		<button
			(click)="snackBar.open('Code copied', '⨉', {duration: 3000})"
			[cdkCopyToClipboard]="'docker restart $(docker ps -a -q --filter ancestor=webdb/app)'"
			color="primary"
			mat-stroked-button>
			<mat-icon svgIcon="docker"></mat-icon>
			Restart container
		</button>
	</div>
</div>
